<template>
  <div>
    <div class="cpsc">
      <div class="cpsc_sm">
        <div class="cpsc_head">
          <h3>库存上传规则说明：</h3>
          <div v-if="$store.state.cpscym">
            <a-icon type="close" @click="close" />
          </div>
        </div>
        <div class="list">
          <ul>
            <li>1.仅支持Excel表格直接上传，建议使用2003-2007版本；文件不应大于2M。</li>
            <li>2.需要包含品牌、型号、价格、可供数量才能上传成功。</li>
            <li>3.品牌、型号、价格、产地相同的数据视为同一条数据。</li>
          </ul>
        </div>

        <div class="up_shangchuan">
          <div class="scnum">
            <span class="left_sc">
              上传：
              <span class="red">{{total}}</span>条数据
            </span>
            <span class="up_href">
              <div>
                <span class="xiazai">
                  <a-icon type="cloud-download" />
                  <a class="xz_up" href="/excelfile/template.xls">
                    <i>导入模板下载</i>
                  </a>
                </span>
                <span @click="dckc" class="xiazai">
                  <a-icon type="download" />
                  <a class="xz_du">
                    <i>导出库存</i>
                  </a>
                </span>
                <span @click="ckkc" class="xiazai">
                  <a class="xz_du">
                    <i>查看库存</i>
                  </a>
                </span>
              </div>
            </span>
          </div>

          <div class="uploadiexel scexel">
            <a-upload
              action="https://vip.bearing.cn"
              listType="picture-card"
              :fileList="fileList"
              @preview="handlePreview"
              @change="Changecpimg"
              accept=".xls, .xlsx"
            >
              <div class="ico" v-if="fileList.length <1">
                <div class="uptext ant-upload-text">
                  <a-icon :type="loading ? 'loading' : 'cloud-upload'" />上传文件
                </div>
              </div>
            </a-upload>
            <span>{{previewImage}}</span>
          </div>
        </div>

        <div class="up_subbtn">
          <a-popconfirm title="确认将现有数据全部覆盖?" @confirm="() =>scsjexl(0)">
            <a-button title="确认导入后，现有数据将删除" type="primary" size="large">确认导入</a-button>
          </a-popconfirm>
          <a-popconfirm title="确认追加数据？" @confirm="() =>scsjexl(1)" v-if="wlkhjb=='sale'">
            <a-button title="确认追加数据？" type="primary" size="large">追加产品</a-button>
          </a-popconfirm>
          <!-- <a-button type="primary" v-if="wlkhjb=='sale'" @click="scsjexl(1)" size="large"></a-button> -->
          <div class="load" v-if="drload">
            <a-spin>
              <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
            </a-spin>
          </div>
          <a-popconfirm title="确认取消导入？" @confirm="() =>clearqxdr">
            <a-button title="确认取消导入" size="large">取消导入</a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
    <!-- <div class="spin">
      <a-spin tip="正在导出，请稍等...">
    </a-spin>
    </div>-->
  </div>
</template>

<script>
import qs from "qs";
//上传图片
function getBase64(img, callback) {
  const reader = new FileReader();
  let file = [];
  file = reader;
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
  sessionStorage.setItem("file", reader);
}

export default {
  inject: ["reload"],
  data() {
    return {
      //库存上传-----------------
      fileList: [],
      //数据导入---上传文件
      previewVisible: false,
      previewImage: "",
      uploading: false,
      exelUrl: "", //exel表格的baes64格式路径
      exflage: false, //exel表格
      //   sjdrmodal: false,
      xlshz: "", //上传的exel表格的后缀名
      total: "0",
      loading: false,
      drload: false,

      //库存上传-----------------
      wlkhjb: sessionStorage.getItem("wlkhjb")
    };
  },

  methods: {
    //数据导入--文件上传

    scsjexl(additional) {
      if (this.fileList) {
        this.exelUrl = this.fileList[0].thumbUrl;
        let name = this.fileList[0].name;
        var i = name.indexOf(".");
        var data = name.substring(i + 1, name.length);
        this.xlshz = data;
        console.log(data);
      }
      if (this.exelUrl != "") {
        this.loading = true;
        this.drload = true;

        this.axios
          .post(
            "kucun/UploadBusinessKc.php",
            qs.stringify({
              additional: additional,
              sqdwid: this.$store.state.bbl_sqdwid,
              fileBase: this.exelUrl,
              fileSuffix: this.xlshz,
              phone: sessionStorage.getItem("phone")
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.loading = false;
              this.drload = false;
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.total = res.data.result;
              this.reload();
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
              this.drload = false;
            }
          });
      } else {
        this.$notification["error"]({
          message: "失败",
          description: "上传文件不能为空"
        });
        this.drload = false;
        return;
      }
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    Changecpimg({ fileList }) {
      this.fileList = fileList;
      $(".uploadiexel").css("border", "0");
      if (this.fileList.length) {
        $(".uploadiexel").css("border", "0");
      } else {
        $(".uploadiexel").css("border", "1px dashed #ccc");
      }
      console.log(this.fileList);
    },
    clearqxdr() {
      (this.exelUrl = ""), (this.fileList[0].name = ".xls/.xlsx");
      this.fileList = [];
      $(".uploadiexel").css("border", "1px dashed #ccc");

      this.$store.state.cpscym = false;
    },
    //库存上传获取上传数量
    getNum() {
      this.axios
        .post(
          "kucun/NumBusinessKc.php",
          qs.stringify({ sqdwid: this.$store.state.bbl_sqdwid })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.total = res.data.result.num;
          }
        });
    },
    dckc() {
      this.axios
        .post(
          "kucun/PushBusinessKc.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            location.href = res.data.result;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    ckkc() {
      this.$store.state.sqdwid = this.$store.state.bbl_sqdwid;
      this.$store.state.dwmc = sessionStorage.getItem("dwmc");
      this.$router.push("/cpgl");
    },
    close() {
      this.$store.state.cpscym = false;
    }
  },

  created() {
    this.getNum();
  }
};
</script>

<style lang='less'>
.cpsc {
  width: 98%;
  height: 600px;
  box-shadow: 0px 0px 7px #ccc;
  background-color: #fff;
  margin: 9px auto;
  position: relative;
  top: 63px;
  // transform: translateX(-50%);
  text-align: left;
  padding: 30px 77px;
  .ico {
    .anticon-cloud-upload {
      vertical-align: top;
      margin-right: 5px;
      color: #40a9ff;
    }

    .uptext {
      font-size: 20px;
      font-weight: bold;
      color: #40a9ff;
    }
  }
  .uploadiexel {
    border: 1px dashed #ccc;
    .ant-upload-list-picture-card .ant-upload-list-item {
      min-width: 148px;
      padding: 0;
      height: 45px;
      margin: 0;
    }
    .ant-upload-list-picture-card .ant-upload-list-item-name {
      display: block;
      margin: 0;
      width: 100%;
      padding: 8px 0;
      line-height: 1.5;
      text-align: center;
      height: 52px;
      background: #ffff;
      display: inline-block;
      position: absolute;
      z-index: 99;
    }
    .ant-upload-list-picture-card .ant-upload-list-item-info {
      border-radius: 4px;
    }
    .ant-upload-list-picture-card .ant-upload-list-item-info::before {
      z-index: 100;
    }
    .ant-upload-list-picture-card .ant-upload-list-item-actions {
      z-index: 999;
      a {
        display: none;
      }
    }
  }

  .cpsc_sm {
    width: 100%;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    .cpsc_head {
      display: flex;
      justify-content: space-between;
      text-align: right;
      i {
        font-size: 20px;
      }
    }
  }
  h3 {
    font-weight: bold;
    color: #666;
    font-size: 19px;
  }
  .list {
    ul {
      line-height: 36px;
      font-size: 16px;
    }
  }
  .left_sc {
    display: inline-block;
    width: 20%;
    text-align: left;
    .red {
      color: red;
      margin: 0 5px;
    }
  }
  .up_href {
    display: inline-block;
    //  margin: 30px;
    text-align: right;
    width: 80%;
    .xiazai {
      margin: 0 5px;
      .xz_up {
        color: #000;
        text-decoration: underline;
      }

      .anticon {
        font-size: 18px !important;
        color: #1890ff;
      }
      a {
        font-size: 16px;
        margin: 0 5px;
      }
    }
  }
  .up_shangchuan {
    .sc {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
    }
    .scnum {
      padding: 10px 0;
    }
    .inbox {
      font-size: 50px;
      color: #1890ff;
    }
    .ant-upload {
      height: 130px !important;
    }
    .ant-upload.ant-upload-drag .ant-upload {
      padding: 0 !important;
    }
    .ant-upload.ant-upload-select-picture-card {
      margin: 0;
    }
    .ant-upload {
      width: 100%;
    }
    // .scexel {
    //   position: relative;
    //   top: 45px;
    //   left: 14px;
    //   width: 157px !important;
    //   height: 36px;
    //   display: inline-block;
    //   border: 0 !important;
    //   height: 40px !important;
    //   .ant-upload.ant-upload-drag {
    //     width: 100% !important;
    //   }
    //   .ant-upload {
    //     padding: 0px 0 !important;
    //     border-radius: 10px !important;
    //   }
    //   .ant-upload-drag-icon {
    //     margin: 0 !important;
    //     display: inline-block !important;
    //     .anticon-cloud-upload {
    //       font-size: 30px !important;
    //       vertical-align: middle !important;
    //       margin-right: 10px;
    //     }
    //   }
    //   .ant-upload-text {
    //     display: inline-block !important;
    //     color: #fff !important;
    //   }
    //   .dr {
    //     position: absolute;
    //     top: 0;
    //     right: -92px;
    //     height: 51px;
    //   }
    // }
    // .ant-upload.ant-upload-drag .ant-upload {
    //   padding: 0px 0 !important;
    //   background-color: #1890ff !important;
    // }
    // .ant-upload.ant-upload-drag {
    //   border: 0 !important;
    // }
  }
  .up_subbtn {
    position: relative;
    width: 100%;
    margin-top: 66px;
    text-align: center;
    button {
      margin: 0 20px !important;
    }
    .load {
      position: absolute;
      background: rgba(255, 255, 255, 0.5);
      top: 0;
      right: 0;
      width: 100%;
      height: 50px;
      .ant-spin-spinning {
        position: relative;
        top: 9px;
        left: -73px;
      }
    }
  }
}
.spin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(255, 255, 255, 0.5);
  z-index: 999;
  .ant-spin-spinning {
    transform: translateY(260px);
    font-size: 22px;
  }
}
</style>
